<template>
  <view class="container">
    <view class="box">
      <uni-swipe-action>
        <uni-swipe-action-item :right-options="options" @click="bindClick(e)">
          <view :class="['Item',recordShow? 'ItemCss1' :'']">
            <view :class="['Item_top',recordShow? 'hCss5':'hCss7']">
              <view class="Item_top_image"  @click="navTo('/subpkg/ldentity/ldentity?id=' + pastItem.animal.id)">
                <image  :src="pastItem.animal.previewImage" mode="aspectFill"></image>
              </view>
              <view class="Item_top_content">
                <h1>{{pastItem.animal.productName}}</h1>
                <text>记录时间：{{pastItem.createTime}}</text>
              </view>
              <view class="compile"  @click="edit">
                <image src="/static/images/mine/compile.png" mode="aspectFill"></image>
              </view>
            </view>
            <view :class="['item_bottom', recordShow? 'hCss5':'hCss3']">
              <view :class="['item_bottom_left', recordShow? '':'flexjc']">
                <h1>{{pastItem.tag.tagName}}</h1>
                <view v-if="recordShow">
                  <image src="/static/images/mine/biao2.png" mode="aspectFill"></image>
                  <text>已过期2天</text>
                </view>
                <view v-if="!recordShow">
                  <image src="/static/images/mine/biao.png" mode="aspectFill"></image>
                  <text>{{pastItem.tips}}天后</text>
                </view>
              </view>
              <view class="item_bottom_right" v-if="recordShow" @click="complete">
                去完成
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
  </view>
</template>

<script>
  export default {
    name: "remind_past",
    data() {
      return {
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#FF6666' // 按钮的背景颜色
          }
        }],
      };
    },
    props: {
      pastItem: {
        type: [Array, Object],
        required: false,
        default: []
      },
      recordShow: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    methods: {
      edit() {
        // console.log(this.remindItem.id)
        this.navTo('/subpkg/addremind/addremind?remindId=' + this.pastItem.id + '&id=' + this.pastItem.tag.id)
        wx.setStorageSync('remindItem', this.pastItem)
      },
      bindClick(e) {
        deleteEstablish(this.pastItem.id).then(res=>{
          this.$util.Tips({
            title:'删除成功'
          })
          this.delete = true
          this.$emit('delete', this.delete)
        }).catch(res=>{
          this.$util.Tips({
            title:res
          })
        })
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      complete() {
        this.navTo('/subpkg/addrecordList/addrecordList?name=' + this.pastItem.tag.tagName + '&id=' + this.pastItem.tag.id + '&animalId=' + this.pastItem.animal.id + '&productName=' + this.pastItem.animal.productName)
      }
    }
  }
</script>

<style lang="scss">
  .ItemCss1 {
    height: 366rpx
  }
  
  .box {
    border-radius: 20rpx;
    overflow: hidden;
  }

  .flexjc {
    display: flex;
    justify-content: space-between;
  }

  .Item {
    width: 690rpx;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;

    .Item_top {
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      padding: 38rpx 40rpx;
      border-bottom: 1rpx solid rgba(241, 241, 241, 1);

      .Item_top_image {
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
      }

      .Item_top_content {
        h1 {
          font-size: 36rpx;
          color: rgba(61, 61, 61, 1);
          font-weight: 600;
        }

        text {
          font-size: 28rpx;
          color: rgba(61, 61, 61, .5);
        }
      }

      .compile {
        position: absolute;
        top: 40rpx;
        right: 40rpx;

        image {
          width: 34rpx;
          height: 34rpx;
          opacity: .5;
        }
      }
    }

    .hCss7 {
      height: 70%;
    }

    .hCss5 {
      height: 50%;
    }

    .hCss3 {
      height: 30%;
    }

    .item_bottom {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 38rpx 40rpx;

      .item_bottom_left {
        width: 100%;

        h1 {
          font-size: 36rpx;
          color: rgba(61, 61, 61, 1);
          font-weight: 600;
        }

        view {
          display: flex;
          align-items: center;
          margin-top: 14rpx;

          image {
            width: 34rpx;
            height: 34rpx;
            margin-right: 10rpx;
          }

          text {
            font-size: 28rpx;
            color: rgba(61, 61, 61, .5);
          }
        }
      }

      .item_bottom_right {
        width: 140rpx;
        height: 56rpx;
        border-radius: 28rpx;
        text-align: center;
        line-height: 56rpx;
        background-color: rgba(253, 211, 56, 1);
        font-size: 26rpx;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
</style>
